<template>
    <div class="home">
        <TypeNav>
            <Category @select-category="onSelectCategory"></Category>
        </TypeNav>
        <!--列表-->
        <ListContainer />
        <!--今日推荐-->
        <TodayRecommend />
        <!-- 商品排行 -->
        <Rank />
        <!-- 猜你喜欢 -->
        <Like />
        <!-- 楼层 -->
        <Floor v-for="item in floors" :key="item.id" :floor="item" />
        <!-- 商标 -->
        <Brand></Brand>
    </div>
</template>

<script setup lang="ts" name="Home">
import { onMounted, provide, ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
import TypeNav from '@/components/TypeNav/index.vue';
import Category from '@/components/Category/index.vue';
import ListContainer from './ListContainer/ListContainer.vue';
import Brand from './Brand/Brand.vue';
import TodayRecommend from './TodayRecommend/TodayRecommend.vue';
import Rank from './Rank/Rank.vue';
import Like from './Like/Like.vue';
import Floor from './Floor/Floor.vue';

import { getFloors } from '@/api/mock';
let floors: Ref<any[]> = ref([]);

onMounted(async () => {
    floors.value = (await getFloors()).data
})
const router = useRouter();
function onSelectCategory(category: any, level: number) {

    router.push({
        name: 'search',
        query: {
            categoryName: category.categoryName,
            [`category${level}Id`]: category.categoryId
        }
    })
}
provide('onSelectCategory', onSelectCategory)

</script>

<style scoped lang="less"></style>